<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 4个Dom元素挂载着2个【响应式数据】 -->
    <h3 id="hMyname">{name}</h3>
    <p id="pMyname">{name}</p>

    <h3 id="hMyage">{age}</h3>
    <p id="pMyage">{age}</p>

    <script>
      const data = {
        // name: "黑哥",
        // age: 18,

        /* 数据的真正载体 */
        x_name: "黑哥",
        x_age: 18,
      };

      Object.defineProperty(data, "age", {
        // 读取data.age
        get() {
          console.log("get", "age");
          return data.x_age;
        },

        // 设置data.age = 19
        set(newValue) {
          console.log("set", "age", newValue);
          data.x_age = newValue;

          /* 通知age的观察者来响应 */
          hMyage.innerText = newValue
          pMyage.innerText = newValue

        },
      });
    </script>

    <script>
      setInterval(() => {
        data.age = data.age + 1
      }, 1000);
    </script>
  </body>
</html>
